<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer tagtable-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <h4 class="type-title">
            <div class="icon-box"><icon-svg name="iconBase"></icon-svg></div>
            <span>基本信息</span>
          </h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="平台名称" prop="plfmNm">
                <el-select v-model="editForm.plfmNm" placeholder="请选择平台" :disabled="drawerType === 'edit'">
                  <el-option label="--" value=""></el-option>
                  <el-option
                    v-for="item in platforms"
                    :key="item.plfmId"
                    :label="item.plfmNm"
                    :value="item.plfmNm"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据库名称" prop="dbNm">
                <el-input
                  placeholder="请输入数据库名称"
                  v-model="editForm.dbNm"
                  :disabled="drawerType === 'edit'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="数据表名称" prop="tableNm">
                <el-input
                  placeholder="请输入数据表名称"
                  v-model="editForm.tableNm"
                  :disabled="drawerType === 'edit'"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="表主键" prop="primaryKey">
                <el-input placeholder="请输入表主键" v-model="editForm.primaryKey"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      editable: true,
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增',
        edit: '编辑'
      },
      platforms: [],
      editForm: {
        plfmNm: '',
        dbNm: '',
        tableNm: '',
        primaryKey: '',
        tableType: ''
      },
      editFormRules: {
        plfmNm: [{ required: true, message: '平台名称不能为空', trigger: 'change' }],
        dbNm: [{ required: true, message: '数据库名称不能为空', trigger: 'blur' }],
        tableNm: [{ required: true, message: '数据表名称不能为空', trigger: 'blur' }],
        primaryKey: [{ required: true, message: '表主键不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    showDrawer(type, data) {
      this.drawerType = type
      this.getPlatform()
      switch (type) {
        case 'add':
          this.editForm.tableType = data.tableType
          this.drawerVisible = true
          break
        case 'edit':
          this.init(data)
          break
      }
    },
    getPlatform() {
      this.$ajax({
        url: this.$ajax.setUrl('mta/mtaPlatform/getAll'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.platforms = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    init(data) {
      this.editForm.plfmNm = data.plfmNm
      this.editForm.dbNm = data.dbNm
      this.editForm.tableNm = data.tableNm
      this.editForm.primaryKey = data.relaField
      this.editForm.tableType = data.tableType
      this.drawerVisible = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = {
            plfmNm: this.editForm.plfmNm,
            dbNm: this.editForm.dbNm,
            tableNm: this.editForm.tableNm,
            primaryKey: this.editForm.primaryKey,
            tableType: this.editForm.tableType
          }
          let url = `mta/mtaData/${this.drawerType === 'edit' ? 'update' : 'save'}`
          this.$ajax({
            url: this.$ajax.setUrl(url),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    clearDialog() {
      this.editForm.plfmNm = ''
      this.editForm.dbNm = ''
      this.editForm.tableNm = ''
      this.editForm.primaryKey = ''
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.drawerType = 'add'
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss">
.tagtable-drawer {
  .el-autocomplete {
    width: 100%;
  }
}
</style>
